<script setup>
import { ClusterOutlined, HomeOutlined, IdcardOutlined } from '@ant-design/icons-vue'

defineOptions({
  name: 'UserInfoCard',
})

const tagList = ['很有想法的', '专注设计', '辣~', '大长腿', '川妹子', '海纳百川']

const teamList = [
  {
    id: 1,
    name: '科学搬砖组',
    color: '#00acf4',
  },
  {
    id: 2,
    name: '都是吴彦祖',
    color: '#e51039',
  },
  {
    id: 3,
    name: '中二少女团',
    color: '#eb602a',
  },
  {
    id: 4,
    name: '程序员日常',
    color: '#00101e',
  },
  {
    id: 5,
    name: '高逼格设计',
    color: '#7e52b5',
  },
  {
    id: 6,
    name: '骗你来学前端',
    color: '#1ed7fd',
  },
]
</script>

<template>
  <a-card>
    <div class="align-center mb-8-3">
      <a-avatar
        :size="104"
        class="mb-4-5"
        src="http://cdn.xuanyunet.com/images/avatar.jpg"
      />
      <div class="fs-18 fw-600 mb-4-1">
        Serati Ma
      </div>
      <div>海纳百川，有容乃大</div>
    </div>
    <div class="mx-8-3">
      <p>
        <idcard-outlined />
        交互专家
      </p>
      <p>
        <cluster-outlined />
        蚂蚁金服－某某某事业群－某某平台部－某某技术部－UED
      </p>
      <p>
        <home-outlined />
        浙江省杭州市
      </p>
    </div>
    <a-divider />
    <div class="mb-4-3">
      标签
    </div>
    <div
      :style="{ gap: '8px' }"
      class="display-flex flex-wrap-wrap"
    >
      <a-tag
        v-for="item in tagList"
        :key="item"
      >
        {{ item }}
      </a-tag>
    </div>
    <a-divider />
    <div class="mb-4-3">
      团队
    </div>
    <a-row :gutter="[8, 24]">
      <a-col
        v-for="item in teamList"
        :key="item.id"
        :lg="24"
        :xl="12"
        class="display-flex align-items-center"
      >
        <a-avatar
          :size="24"
          :style="{ backgroundColor: item.color, fontSize: '12px' }"
          class="mr-4-3"
        >
          {{ item.name.slice(0, 1) }}
        </a-avatar>
        {{ item.name }}
      </a-col>
    </a-row>
  </a-card>
</template>

<style lang="less" scoped></style>
